<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>08_条件渲染</title>
  </head>
  <body>
    <!--
      1. 条件渲染指令
        v-if
        v-else
        v-show
      2. 比较v-if与v-show
        如果需要频繁切换 v-show 较好
      -->

    <div id="app">
      <button @click='tap'>按钮</button>
      <p v-if="isShow">热巴真好看！</p>
      <p v-else-if='isHide'>baby真好看</p>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        isShow:true,
        isHide:false,
      },
      methods:{
        tap(){
          this.isShow=!this.isShow
          this.isHide=!this.isHide
        }
      }
    })
    </script>
  </body>
</html>
